//公用样式
require('../../assets/css/index.less');
require('../../assets/css/basic.less');
//引入图标库样式
require("../../assets/fonts/iconfont.css")
//自己的样式
require("./circle.less")
//导入公用函数
const dom = require("../../utils/dom.js")
const https = require("../../utils/https.js")
const local = require("../../utils/local.js")


dom.ready(function () {
  // 调用底部菜单
  dom.bMenu('circle');
  // 给按钮添加跳转

  // 课程渲染
  // 获取数据
  https.get('/api/train/courseList', {}, function (res) {
    if (res.errno == 0) {
      res.data.forEach(function (v, i) {
        if (i == 0) {
          newCourse.innerHTML = `
          <li id="newCourse" >
              <p class="db CourseTxt">最新课程 </p>
              <div class="new-course mt10" >
                  <a class="db pb mb mr">
                      <img data-id="${v.courseId}" src="http://47.96.154.185:3701${v.imgurl}" alt="">
                      <h3 class="f14  pl">${v.name}</h3>
                      <p class="f12 pl mt10">${v.desc}</p>
                  </a>
              </div>

          </li>
          `
        }

      });
    }
  })


      // 方式二：使用js跳转来传参数
      newCourse.addEventListener('click',function(event){
        console.log(event);
        console.log(event.target.dataset);
        // 方式二：使用js的方式实现跳转传参数---传统小项目使用最多
        // 获取当前列表的id
        let id = event.target.dataset.id;

        // // js跳转
        // location.href='/courseintro.html?'+id


        // 方式三：本地存储来实现传参数--高级玩法--后期使用最多，处理大批量数据
        local.set('courseId',id);
        // js跳转
        location.href='courseintro.html'

      })

  


  // 圈子渲染
  https.get('/api/circles/opinionList', {}, function (res) {
    console.log(res.data);
    if (res.errno == 0) {
      res.data.forEach(function (v, i) {
        console.log(v, i);
        dom.getEle('#circleBox').innerHTML += `
        <li>
                <div class="userNameData">
                    <div class="userdata mt20">
                        <div class="user">
                            <img src="http://47.96.154.185:3701${local.get('userData').imgUrl}" alt="">
                            <div>
                                <h3>${local.get('userData').nickName}</h3>
                                <p>XX省, XX市</p>
                            </div>
                        </div>
                        <p class="content">${v.content}</p>
                    </div>
                    <div class="dataimgs df jca" id="imgBox${i}">
                    </div>
                </div>
            </li>`

        if (v.imgUrls != null) {
          v.imgUrls.forEach(function (v) {
            if (v.indexOf('http')!= -1) {
              dom.getEle('#imgBox'+i).innerHTML += `<img src="${v}" alt="" />`
            } else {
              dom.getEle('#imgBox'+i).innerHTML += `<img src="http://47.96.154.185:3701${v}" alt="" />`
            }
          })
        }
      })
    }
  })



  
  
   

})